<template>
    <div ref='canvas_wrap' :style='{background: background}' class='canvas_wrap'>
        <div class='canvas_wrap_transform'>
            <canvas ref='canvas_2d' class='canvas_2d'></canvas>
            <template v-if='isRen'>
                <div
                    class='image_wrap'
                    :style='{transform:`translate(${position.x}px,${position.y}px)`}'
                >
                    <img
                        v-for='(item, index) in absoluteVal'
                        :key='dimensionalConfig[index].to || index'
                        class='ren_to'
                        :style='{width: item.w + "px", height: item.h + "px", left: item.l + "%", top: item.t + "%"}'
                        src='/image/rens.png'
                        @click='toIframeViewHandler(dimensionalConfig[index])'
                        alt
                    />
                </div>
            </template>
        </div>
    </div>
</template>

<script>
import { AutoUnevent } from '@/utils/utilFun.js';
const event = new AutoUnevent();
export default {
    props: {
        dimensional: {
            type: String,
            default: '',
        },
        dimensionalConfig: {
            type: Array,
            default: () => [],
        },
        isRen: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            imageCache: null,
            ren_w: 45,
            ren_h: 75,
            w: 1182,
            h: 762,
            absoluteVal: [
                {
                    l: 1,
                    t: 1,
                    w: 1,
                    h: 1,
                },
            ],
            background: '#a5a5a5',
            scale: 1,
            currentIframe: 0,
            ratio: 1,
            _ctx: null,
            position: {
                x: 0,
                y: 0,
            },
        };
    },
    async mounted() {
        await this.reload();
        const canvas_wrap = this.$refs['canvas_wrap'];
        const canvas = this.$refs['canvas_2d'];
        event.on(
            window,
            'resize',
            () => {
                const offsetWidth = canvas_wrap.offsetWidth;
                const offsetHeight = canvas_wrap.offsetHeight;
                canvas.width = offsetWidth;
                canvas.height = offsetHeight;
                this.draw();
            },
            {
                passive: true,
            }
        );
    },
    beforeDestroy() {
        event.clear();
    },
    methods: {
        async reload() {
            if (!this.dimensional) {
                return;
            }

            try {
                await this.loadImage();
            } catch (error) {}
            if (!this.imageCache) {
                return;
            }
            const canvas = this.$refs['canvas_2d'];
            const canvas_wrap = this.$refs['canvas_wrap'];
            var ctx = canvas.getContext('2d');
            this._ctx = ctx;
            var devRatio = window.devicePixelRatio || 1,
                backingStore =
                    ctx.backingStorePixelRatio ||
                    ctx.webkitBackingStorePixelRatio ||
                    ctx.mozBackingStorePixelRatio ||
                    ctx.msBackingStorePixelRatio ||
                    ctx.oBackingStorePixelRatio ||
                    ctx.backingStorePixelRatio ||
                    1;

            canvas.width = canvas_wrap.offsetWidth;
            canvas.height = canvas_wrap.offsetHeight;
            this.ratio = this.imageCache.height / this.imageCache.width;
            this.draw();
        },
        draw() {
            const canvas = this.$refs['canvas_2d'];
            if (this.isRen) {
                this.computedRenPosition();
            }

            this._ctx.clearRect(0, 0, canvas.width, canvas.height);
            if (canvas.height / canvas.width > this.ratio) {
                this._ctx.drawImage(
                    this.imageCache,
                    (canvas.width * (1 - this.scale)) / 2.0 + this.position.x,
                    (canvas.height - canvas.width * this.ratio * this.scale) / 2.0 + this.position.y,
                    canvas.width * this.scale,
                    canvas.width * this.ratio * this.scale
                );
            } else {
                this._ctx.drawImage(
                    this.imageCache,
                    (canvas.width - (canvas.height * this.scale) / this.ratio) / 2 + this.position.x,
                    (canvas.height * (1 - this.scale)) / 2.0 + this.position.y,
                    (canvas.height * this.scale) / this.ratio,
                    canvas.height * this.scale
                );
            }
        },
        loadImage() {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.onload = () => {
                    this.imageCache = img;
                    this.$emit('loading', 1, 1);
                    resolve();
                };
                img.onerror = () => {
                    reject();
                };
                img.src = this.dimensional;
            });
        },
        computedRenPosition() {
            const canvas_wrap = this.$refs['canvas_wrap'];
            this.dimensionalConfig.forEach((item, index) => {
                this.$set(this.absoluteVal, index, {
                    l: (((item.left - this.ren_w / 2) * this.scale) / this.w) * 100,
                    t: (((item.top - this.ren_h / 2) * this.scale) / this.h) * 100,
                    w: this.ren_w * (canvas_wrap.offsetWidth / this.w),
                    h: this.ren_h * (canvas_wrap.offsetHeight / this.h) * this.ratio,
                });
            });
        },
        offset(x, y, isCount) {
            if (typeof x === 'number') {
                if (isCount) {
                    this.position.x += x;
                } else {
                    this.position.x = x;
                }
            }
            if (typeof y === 'number') {
                if (isCount) {
                    this.position.y += y;
                } else {
                    this.position.y = y;
                }
            }
            this.draw();
        },
        strainScale(a) {
            if (this.isRen) {
                this.$emit('update:is-ren', false);
            }
            if (this.scale + a <= 0.2 || Math.floor(this.scale + a) > 2) {
                return;
            }
            this.scale += a;
            this.draw();
        },
        toIframeViewHandler(item) {
            this.$emit('changeIframeInner', item);
        },
    },
    watch: {
        dimensional() {
            this.absoluteVal.length = 0;
            if (this.isRen === true && this.dimensionalConfig.length === 1) {
                this.$emit('changeIframeInner', this.dimensionalConfig[0]);
            }
            this.reload();
        },
        isRen() {
            if (this.isRen) {
                this.scale = 1;
                this.draw();
            }
            this.computedRenPosition();
        },
    },
};
</script>


<style lang='scss' scoped>
.canvas_wrap {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;

    .canvas_wrap_transform {
        width: 100%;
        height: 100%;
        .canvas_2d {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .image_wrap {
            display: inline-block;
            width: 100%;
            height: 100%;
            .ren_to {
                position: absolute;
                width: 35px;
                height: 40px;
                left: 20px;
                top: 200px;
                cursor: pointer;
            }
        }
    }
}
</style>